<template>
    <div class="page" v-loading="loading">
        <div class="flex-row flex-item">
            <tz-filter @change="filterChange" :filter-data="filterData">
                <template v-slot:default="scope">
                    <el-input class="table-filter-item" :maxlength="100" size="small" clearable v-model="scope.data.deviceName" placeholder="设备名称"></el-input>
                    <el-input class="table-filter-item" :maxlength="100" size="small" clearable v-model.trim="scope.data.summaryContent" placeholder="告警描述"></el-input>
                    <el-input class="table-filter-item" :maxlength="100" size="small" clearable v-model.trim="scope.data.ipStr" placeholder="请输入ip地址"></el-input>
                    <el-input class="table-filter-item" :maxlength="100" size="small" clearable v-model.trim="scope.data.orgName" placeholder="单位名称"></el-input>
                    <el-select class="table-filter-item" v-model="scope.data.severity" clearable size="small" placeholder="告警等级">
                        <el-option
                                v-for="item in [{id: 5, name: '一级'}, {id: 2, name: '二级'}, {id: 3, name: '三级'}]"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </tz-filter>
            <div class="flex1"></div>
            <el-button v-if="$auth['warning_query_delete']" style="margin-bottom: 10px" type="primary" size="mini" @click="deleteBatch" :disabled="!rows.length">批量删除</el-button>
        </div>
        <br>
        <tz-table
            ref="tzTable"
            highlight-current-row
            size="mini"
            @selection-change="selectChange"
            :data="loadData">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    v-if="columnConfigData.includes('设备名称')"
                    show-overflow-tooltip
                    label="设备名称">
                <template slot-scope="scope">
                    <high-light :value="scope.row.name || scope.row.ip" :keyword="filterData.deviceName"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="summaryContent"
                    v-if="columnConfigData.includes('告警描述')"
                    show-overflow-tooltip
                    label="告警描述">
                <template slot-scope="scope">
                    <high-light :value="scope.row.summaryContent" :keyword="filterData.summaryContent"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="resourceGroupName"
                    width="150px"
                    v-if="columnConfigData.includes('单位名称')"
                    label="单位名称">
                <template slot-scope="scope">
                    <high-light :value="scope.row.resourceGroupName" :keyword="filterData.orgName"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="ip"
                    v-if="columnConfigData.includes('ip地址')"
                    label="ip地址">
                <template slot-scope="scope">
                    <high-light :value="scope.row.ip" :keyword="filterData.ipStr"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="dealContent"
                    v-if="columnConfigData.includes('处理备注')"
                    show-overflow-tooltip
                    label="处理备注"
                    :formatter="(row) => {
                       return row.dealContent ? row.dealContent : '-'
                     }">
            </el-table-column>
            <el-table-column
                    prop="severity"
                    v-if="columnConfigData.includes('告警等级')"
                    width="100px"
                    label="告警等级">
                <template slot-scope="scope">
                    <el-tag
                            size="mini"
                            :type="{'5': 'danger', '3': 'info', '2': 'warning'}[scope.row.severity]"
                    >{{scope.row.severity | severityToLevel}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="alarmNum"
                    v-if="columnConfigData.includes('告警次数')"
                    width="100px"
                    label="告警次数"
                    :formatter="(row) => {
                       return row.alarmNum || row.alarmNum === 0 ? `${row.alarmNum}次` : '-'
                     }">
            </el-table-column>
            <el-table-column
                    prop="dealStatus"
                    v-if="columnConfigData.includes('状态')"
                    width="100px"
                    label="状态">
                <template slot-scope="scope">
                    <el-tag size="mini"
                            :type="scope.row.dealStatus ? 'success' : ''"
                    >{{scope.row.dealStatus ? '已处理' : '未处理'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="syncTime"
                    v-if="columnConfigData.includes('同步时间')"
                    show-overflow-tooltip
                    label="同步时间"
                    :formatter="(row) => {
                       return row.syncTime ? moment(row.syncTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                     }">
            </el-table-column>
            <el-table-column
                    prop="handleTime"
                    v-if="columnConfigData.includes('处理时间')"
                    show-overflow-tooltip
                    label="处理时间"
                    :formatter="(row) => {
                       return row.dealTime ? moment(row.dealTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                     }">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    v-if="columnConfigData.includes('告警时间')"
                    show-overflow-tooltip
                    label="告警时间"
                    :formatter="(row) => {
                       return row.lastcurremce || '-'
                     }">
            </el-table-column>
            <el-table-column
                    prop="tag"
                    width="100px"
                    label="操作">
                <template slot="header">
                    <div class="flex-row flex-item">
                        <div class="flex1">操作</div>
                        <i style="font-size: 18px; cursor: pointer" class="el-icon-s-tools" @click="openColConf"></i>
                    </div>
                </template>
                <template slot-scope="scope">
<!--                    <el-button :disabled="!!scope.row.dealStatus" @click="handle(scope.row)" size="small" type="text">处理</el-button>-->
                    <el-button v-if="$auth['warning_query_delete']" size="small" type="text" @click="deleteOne(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </tz-table>
        <column-config ref="columnConf" @onSure="getConfig" :page-key="pageKey"></column-config>
    </div>
</template>

<script>
import moment from 'moment'
import { networks } from '@/assets/dict'
import columnConfig from '@/components/columnConfig';
import {getStorage} from '@/utils/storage';
export default {
  name: 'task',
  components: {
    columnConfig
  },
  data() {
    return {
      moment,
      pageKey: 'warning_query_page_column_config',
      columnConfigData: null,
      columnNames: ['设备名称', '告警描述', '单位名称', 'ip地址', '告警等级', '处理备注', '告警次数', '状态', '处理时间', '同步时间', '告警时间'],
      networks,
      loading: false,
      filterData: {
        network: 'JZW',
        deviceName: '',
        summaryContent: '',
        orgName: '',
        severity: '',
        ipStr: '',
      },
      tableData: [],
      rows: [],
      isEq: 0
    }
  },
  created() {
    this.columnConfigData = getStorage(this.pageKey) || [...this.columnNames]
  },
  methods: {
    openColConf() {
      this.$refs.columnConf.open(this.columnNames)
    },
    getConfig(res) {
      this.columnConfigData = res
    },
    filterChange(res) {
      this.isEq = res.isEq
      this.refresh()
    },
    selectChange(rows) {
      this.rows = rows
    },
    deleteBatch() {
      this.deleteAlarms(this.rows)
    },
    deleteOne(row) {
      this.deleteAlarms([row])
    },
    deleteAlarms(rows) {
      this.$confirm('是否删除选中告警').then(res => {
        this.loading = true
        this.$http.post('/alarm/data/deleteAlarm', rows.map(item => item.id)).then(res => {
          this.$TZmessage.success('删除成功')
        }).catch(err => {
          this.$TZmessage.error(err.msg || '删除失败')
        }).finally(() => {
          this.loading = false
          this.refresh()
        })
      }).catch(err => {
        console.log(err)
        console.log('取消执行')
      })
    },
    loadData(params) {
      const {network, orgName, severity, ipStr, deviceName, summaryContent} = this.filterData
      return this.$http.get('/alarm/data/getAlarmPage', {
        params: {
          network,
          orgName,
          severity,
          ip: ipStr,
          deviceName,
          summaryContent,
          isEq: this.isEq,
          ...params
        }
      }).then(res => {
        return {
          data: res.records || [],
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.error || '获取数据失败')
      })
    },
    refresh() {
      this.$refs.tzTable.refresh(true)
    },
  }
}
</script>

<style lang="scss" scoped>
    .page {
    }
</style>